Semantic HTML Tags and Their Introduction
Semantic tags clearly describe the meaning of their content to both browsers and developers. Instead of just telling the browser how something looks, they convey the role or purpose of the content. Many were introduced in HTML5 (2014 W3C Recommendation), while a few existed earlier.
- <article> (HTML5) – Represents self-contained content such as a blog post or news article.
- <section> (HTML5) – Defines a thematic grouping of content, typically with a heading.
- <nav> (HTML5) – Represents a block of navigation links.
- <header> (HTML5) – Introductory content, often containing a logo, heading, or nav.
- <footer> (HTML5) – Footer for a document or section, often with copyright or related links.
- <aside> (HTML5) – Tangential or secondary content, like sidebars or pull quotes.
- <main> (HTML5) – Represents the dominant content of the page (only one per page).
- <figure> (HTML5) – Used to group illustrations, diagrams, code snippets, etc.
- <figcaption> (HTML5) – Caption for a <figure> element.
<mark> (HTML5) – Highlights or marks text for reference.
<time> (HTML5) – Represents dates and times in a machine-readable way.
- <address> (HTML4, improved in HTML5) – Contact information.
<abbr> (HTML4) – Defines abbreviations/acronyms.
<cite> (HTML4) – Reference to a creative work (book, article, etc.).
<code> (HTML4) – Represents inline code snippets.
<em> (HTML4) – Emphasized text, usually italicized.
<strong> (HTML4) – Important text, usually bold.
<q> (HTML4) – Short inline quotation.
- <blockquote> (HTML4) – Longer quotations, usually indented.
- <dl>, <dt>, <dd> (HTML4) – Semantic description lists.
- <legend> and <fieldset> (HTML4) – Provide semantic grouping in forms.
<label> (HTML4) – Semantic association with form controls.
- <summary> and <details> (HTML5) – Used for collapsible content sections.
<bdi> (HTML5) – Bi-directional text isolation.
<wbr> (HTML5) – Word break opportunity for better text rendering.
Most of the modern layout-related semantic tags like <header>, <footer>, <article>, <aside>, <nav>, <main>, <figure>, and <figcaption> were introduced with HTML5 (2014). Older semantics like <em>, <strong>, <cite>, <code>, <blockquote>, etc., have existed since HTML4 (1997).